<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ taglib
	prefix="sec" uri="http://www.springframework.org/security/tags"%>

<html>
<head>
<title>QnA</title>
<style>
body {
	font-family: Calibri;
}

table {
	border: 1px solid;
	border-collapse: collapse;
}

td {
	border: 1px solid;
}

th {
	text-align: left;
}
</style>
<link rel="stylesheet" type="text/css" href="../commons/jquery-ui.css" />

<script type="text/javascript" src="../commons/jquery.min.js"></script>
<script type="text/javascript" src="../commons/jquery-ui.min.js"></script>

</head>
<body>
	<div align="right">
		Logged in as <a href="<c:url value="/" />"><sec:authentication
				property="principal.username" /></a>
	</div>
	<br />
	<h2>${answerresult}</h2>
	<br />
	<div align="right">
		<a href="<c:url value="j_spring_security_logout" />">logout</a>
	</div>
	<script type="text/javascript">
		function split(val) {
			return val.split(/,\s*/);
		}
		function extractLast(term) {
			return split(term).pop();
		}

		$(document)
				.ready(
						function() {

							$("#relatedProduct")
									.autocomplete(
											{
												source : '${pageContext. request. contextPath}/get_related_product_list.html'
											});

							$("#relatedToTopic")
									.autocomplete(
											{
												source : function(request,
														response) {
													$
															.getJSON(
																	"${pageContext. request. contextPath}/get_related_to_topic_list.html",
																	{
																		term : extractLast(request.term)
																	}, response);
												},
												search : function() {
													// custom minLength
													var term = extractLast(this.value);
													if (term.length < 1) {
														return false;
													}
												},
												focus : function() {
													// prevent value inserted on focus
													return false;
												},
												select : function(event, ui) {
													var terms = split(this.value);
													// remove the current input
													terms.pop();
													// add the selected item
													terms.push(ui.item.value);
													// add placeholder to get the comma-and-space at the end
													terms.push("");
													this.value = terms
															.join(", ");
													return false;
												}
											});

						});
	</script>

</body>
</html>
